<template>
  <div id="loginDiv">
    <div class="zss_loginimg">
      <img src="/static/images/immenselogo.png">
    </div>
    <div class="zss_biandan">
      <Form :model="formTop" label-position="top">
        <FormItem l>
            <span class="zss_logintitle">用户名：</span>
            <Input v-model="formTop.name" placeholder="请输入用户名..."></Input>
        </FormItem>
        <FormItem >
            <span class="zss_logintitle">密  码：</span>
            <Input v-model="formTop.password" placeholder="请输入密码..."></Input>
        </FormItem>
        <Button style="margin-top:10px;padding:10px 0" @click="login" type="success" size="large" long>登录</Button>

        <div class="zss_bottomform">
          <a style="float:left">忘记密码？</a>
          <a style="float:right">没有账号？立即注册</a>
        </div>

        <div class="zss_dsf">
          <a href="#">
            <img src="/static/images/weixin.png" width="40">
          </a>
          <a href="#">
            <img src="/static/images/qq.png" width="40">
          </a>
          <a href="#">
            <img src="/static/images/weibo.png" width="40">
          </a>
        </div>

    </Form>
    </div>
  </div>
</template>
<script>

  import * as types from '@/store/types'
  export default {
    data () {
      return {
        formTop: {
          name: '',
          password: ''
        },
        token: null
      }
    },
    mounted() {
      this.$store.commit(types.LOGOUT);
    },
    methods: {
      login(){
        let that = this
       // console.info("UserName" + that.fromTop.name)
        this.$Message.success('登录成功');
        that.token = "token"
        that.$store.commit(types.LOGIN, that.token)
        let redirect = decodeURIComponent(that.$route.query.redirect || '/manager')
        that.$router.push({
          path: redirect
        })
        //销毁当前页。退出时执行mounted方法进行退出。
        that.$destroy()
      },
    }
  }
</script>
<style scoped>
  #loginDiv{
    width: 100%;
    height: 100vh;
    background: linear-gradient(60deg,#541466 0,#17b9e6 100%)
  }
  .zss_biandan{
    background-color:rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow:hidden;
    width: 500px;
    margin:auto;
    padding:30px;
  }
  .zss_loginimg{
    padding:120px 0 50px;
  }
  .zss_loginimg img{
    width: 200px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .zss_logintitle{
    color: white;
  }
  .zss_bottomform{
     padding:10px 0;
     overflow: hidden;
  }
  .zss_bottomform a{
    color: white;
  }
  .zss_bottomform a:hover{
    text-decoration:underline;
  }
  .zss_dltitle{
    color: white;
    padding:15px 0;
    text-align: center;
    border: 1px solid #32C25A;
    border-radius: 5px
  }
  .zss_dltitle:hover{
    background:#32C25A;
    transition: all 0.3s;
    border: 1px solid #32C25A;
  }
  .zss_dsf{
    padding-top: 20px;
    text-align: center;
  }
  .zss_dsf a{
    padding:0 10px;
  }
</style>
